<template>
	<view>
		<view class="header-title">{{title}}</view>
		<view class="beizhu">
			{{beizhu}}
		</view>
		<view class="main">
			<view class="main-item" v-for="(item,index) in list" :key="index">
				<view v-if="item.pid==1">
					<view class="main-item-title">
						<text style="color: #FF0000;">{{item.xuan==2?'*':''}}</text>
						{{index+1}}.{{item.ti}}
						<text v-if="item.zuishao!='不限' && item.zuishao!=null && item.zuiduo!='不限' && item.zuiduo!=null ">[请选择{{item.zuishao}}至{{item.zuiduo}}项]</text>
						<text v-if="item.zuishao!=null && (item.zuiduo=='不限' || item.zuiduo==null)  && item.zuishao!='不限' ">[至少选择{{item.zuishao}}项]</text>
						<text v-if="(item.zuishao=='不限' || item.zuishao==null) && item.zuiduo!='不限' && item.zuiduo!=null ">[至多选择{{item.zuiduo}}项]</text>
					</view>
					<radio-group v-if="item.yan == 1" @change="radioChange($event,item)" :data-num="index" :data-id="item.id"
					 :data-xuan="item.xuan">
						<label class="labels flex" v-for="(el, index) in item.di" :key="el.id">
							<view>
								<radio color='#209FFC' style="transform:scale(0.7)" :value="el.id" :checked="el.check" />
							</view>
							<view>{{el.wen}}</view>
							<view v-if="el.img" class="diImg">
								<image :src="el.img" mode=""></image>
							</view>
						</label>
					</radio-group>
					<radio-group v-else class="flex_ti flex" @change="radioChange($event,item)" :data-num="index" :data-id="item.id"
					 :data-xuan="item.xuan">
						<label class="labels flex" v-for="(el, index) in item.di" :key="el.id">
							<view>
								<radio color='#209FFC' style="transform:scale(0.7)" :value="el.id" :checked="el.check" />
							</view>
							<view>{{el.wen}}</view>
							<view v-if="el.img" class="diImg">
								<image :src="el.img" mode=""></image>
							</view>
						</label>
					</radio-group>
					<view v-if="item.xuantiao"><text style="color: #FF0000;">*</text>{{'跳转到第'+(item.xuanIndex)}}</view>
					<view v-if='item.dependTi'>依赖于第{{item.dependTi}}题 <text v-if="item.dependItem">第{{item.dependItem}}个选项</text></view>
				</view>
				<view v-if="item.pid==2">
					<view class="main-item-title">
						<text style="color: #ff0000;">{{item.xuan==2?'*':''}}</text>
						{{index+1}}.{{item.ti}}
						<text v-if="item.zuishao=='不限' && item.zuiduo=='不限'">[多选题]</text>
						<text v-if="item.zuishao!='不限' && item.zuishao!=null && item.zuiduo!='不限' && item.zuiduo!=null ">[请选择{{item.zuishao}}至{{item.zuiduo}}项]</text>
						<text v-if="item.zuishao!=null && (item.zuiduo=='不限' || item.zuiduo==null)  && item.zuishao!='不限' ">[至少选择{{item.zuishao}}项]</text>
						<text v-if="(item.zuishao=='不限' || item.zuishao==null) && item.zuiduo!='不限' && item.zuiduo!=null ">[至多选择{{item.zuiduo}}项]</text>
					</view>
					<checkbox-group v-if="item.yan == 1" @change="checkChange($event, item)" :data-num="index" :data-id="item.id"
					 :data-xuan="item.xuan">
						<label class="labels flex" v-for="(el, index) in item.di" :key="el.id">
							<view>
								<checkbox :disabled="el.canCheck" color='#209FFC' style="transform:scale(0.7)" :value="el.id" :checked="el.check" />
							</view>
							<view>{{el.wen}}</view>
							<view v-if="el.img" class="diImg">
								<image :src="el.img" mode=""></image>
							</view>
						</label>
					</checkbox-group>
					<checkbox-group v-else class="flex_ti flex" @change="checkChange($event, item)" :data-num="index"
					 :data-id="item.id" :data-xuan="item.xuan">
						<label class="labels other flex" v-for="(el, index) in item.di" :key="el.id">
							<view>
								<checkbox :disabled="el.canCheck" color='#209FFC' style="transform:scale(0.7)" :value="el.id" :checked="el.check" />
							</view>
							<view>{{el.wen}}</view>
							<view v-if="el.img" class="diImg">
								<image :src="el.img" mode=""></image>
							</view>
						</label>
					</checkbox-group>
					<view v-if="item.xuantiao"><text style="color: #FF0000;">*</text>{{'跳转到第'+(item.xuanIndex)}}</view>
					<view v-if='item.dependTi'>依赖于第{{item.dependTi}}题 <text v-if="item.dependItem">第{{item.dependItem}}个选项</text></view>
				</view>
				<view v-if="item.pid==3">
					<view class="main-item-title">
						<text style="color: #FF0000;">{{item.xuan==2?'*':''}}</text>
						{{index+1}}.{{item.ti}}</view>
					<input class="textareacss" :data-order="order" :data-index="index" :data-id="item.id" :data-xuan="item.xuan" @blur="regValue($event, item)" />
					<view v-if="item.xuantiao"><text style="color: #FF0000;">*</text>{{'跳转到第'+(item.xuanIndex)}}</view>
					<view v-if='item.dependTi'>依赖于第{{item.dependTi}}题 <text v-if="item.dependItem">第{{item.dependItem}}个选项</text></view>
				</view>
				<view class="remark_box" v-if="item.pid==4">
					<view class="item-title">
						<text>备注：{{item.beizhu.remark}}</text>
						<view v-if="item.beizhu.img.length > 0" class="img_box">
							<image v-for="el in item.beizhu.img" :src="el.url" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="save" @tap="save">提交</view>
		<view class="jubao" @tap="Tip">举报</view>
	</view>
</template>

<script>
	import api from "@/common/api.js";
	import {
		baseURL
	} from "@/common/http.js";
	export default {
		data() {
			return {
				title: '',
				beizhu: '',
				list: [],
				current: -1,
				values: [],
				wenid: '',
				title: '',
				checkNum: 0,
				key: true
			};
		},
		methods: {
			Tip() {
				uni.navigateTo({
					url: '../tip/submitTip/submitTip?wenid=' + this.wenid + '&id=' + this.id + '&type=' + 3
				})
			},
			radioChange(e, item) {
				let values = e.detail.value
				let items = item
				let ids = e.currentTarget.dataset.id
				let num = e.currentTarget.dataset.num
				let xuan = e.currentTarget.dataset.xuan
				this.values[num] = {
					nameid: uni.getStorageSync('message')[0].id ? uni.getStorageSync('message')[0].id : '',
					wenid: this.wenid,
					wenidid: ids,
					daid: e.target.value,
					pid: 1,
					xuan: xuan
				}
				// 显示依赖的题目
				item.di.forEach((el, index) => {
					if (el.dependBy) {
						this.list.forEach((val, i) => {
							if (val.id == el.dependBy) {
								this.$set(val, 'showItem', true)
							}
						})
					}
				})
				// 跳转
				if (item.xuantiao) {
					let idx = ''
					this.list.forEach((el, index) => {
						if (el.id == item.xuantiao) {
							idx = index
						}
					})
					for (let i = 0; i < this.list.length; i++) {
						if (i > num && i <= idx && this.list[i].id != item.xuantiao) {
							this.list[i].showTi ? this.list[i].showTi = false : ''
						}
					}
					this.$forceUpdate()
				}
			},
			checkChange(e, item) {
				let zd = item.zuiduo
				let zs = item.zuishao
				let tuid = item.id
				let items = item
				let values = e.detail.value
				let id = e.currentTarget.dataset.id
				let num = e.currentTarget.dataset.num
				let xuan = e.currentTarget.dataset.xuan
				this.values[num] = {
					nameid: uni.getStorageSync('message')[0].id ? uni.getStorageSync('message')[0].id : '',
					wenid: this.wenid,
					wenidid: id,
					daid: e.target.value,
					pid: 1,
					xuan: xuan
				}
				// 显示依赖的题目
				item.di.forEach((el, index) => {
					if (el.dependBy) {
						this.list.forEach((val, i) => {
							if (val.id == el.dependBy) {
								this.$set(val, 'showItem', true)
							}
						})
					}
				})
				// 跳转
				if (item.xuantiao) {
					let idx = ''
					this.list.forEach((el, index) => {
						if (el.id == item.xuantiao) {
							idx = index
						}
					})
					for (let i = 0; i < this.list.length; i++) {
						if (i > num && i <= idx && this.list[i].id != item.xuantiao) {
							this.list[i].showTi ? this.list[i].showTi = false : ''
						}
					}
					this.$forceUpdate()
				}
			},
			/* getvalue(e) {
				let num = e.currentTarget.dataset.num
				let ids = e.currentTarget.dataset.id
				let xuan = e.currentTarget.dataset.xuan
				this.values[num] = {
					nameid: uni.getStorageSync('message')[0].id,
					wenid: this.wenid,
					wenidid: ids,
					wen: e.detail.value,
					pid: 3,
					xuan: xuan
				}
			}, */
			regValue(e, item) {
				let order = e.currentTarget.dataset.order
				let val = e.target.value
				let idx = e.currentTarget.dataset.index
				let ids = e.currentTarget.dataset.id
				let xuan = e.currentTarget.dataset.xuan
				let reg = new RegExp()
				let text = ''
				if (order) {
					switch (parseInt(order)) {
						case 2:
							reg = /[u4e00-u9fa5]/;
							text = '中文'
							break;
						case 3:
							reg = /^[A-Za-z]+$/;
							text = '英文'
							break;
						case 4:
							reg = /^[0-9]*$/;
							text = '数字'
							break;
						case 5:
							reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
							text = '手机'
							break;
						case 6:
							reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
							text = '邮件'
							break;
						case 7:
							reg = /(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#\/%?=~_|!:,.;]+[-A-Za-z0-9+&@#\/%=~_|]/;
							text = '网址'
							break;
						default:
							break;
					}
					if (order != 0 && order != 1) {
						if (!reg.test(val)) {
							uni.showToast({
								title: '请规范输入第' + (parseInt(idx) + 1) + '题的' + text,
								icon: 'none',
								duration: 1500
							})
						}
					}
					this.values[idx] = {
						nameid: uni.getStorageSync('message')[0].id ? uni.getStorageSync('message')[0].id : '',
						wenid: this.wenid,
						order: order,
						wenidid: ids,
						wen: val,
						pid: 3,
						xuan: xuan
					}
					// 显示依赖的题目
					if (item.dependBy) {
						this.list.forEach((val, i) => {
							if (val.id == item.dependBy) {
								if (e.target.value != '') {
									this.$set(val, 'showItem', true)
								}
								this.$set(val, 'showItem', false)
							}
						})
					}
					// 跳转
					if (item.xuantiao) {
						let ixd = ''
						this.list.forEach((el, index) => {
							if (el.id == item.xuantiao) {
								ixd = index
							}
						})
						console.log(item.xuantiao, 'XX')
						if(e.target.value != '') {
							console.log(e.target.value, 'VA')
							for (let i = 0; i < this.list.length; i++) {
								if (i > idx && i <= ixd && this.list[i].id != item.xuantiao) {
									this.list[i].showTi ? this.list[i].showTi = false : ''
								}
							}
						}
						this.$forceUpdate()
					}
				}
				// 显示依赖的题目
				if (item.dependBy && e.target.value != '') {
					this.list.forEach((val, i) => {
						if (val.id == item.dependBy) {
							if (e.target.value != '') {
								this.$set(val, 'showItem', true)
							}
							this.$set(val, 'showItem', false)
						}
					})
				}
			},
			/* save() { 
				if (this.values.length > 0) {
					for (let el in this.list) {
						console.log(el, 'EL')
						for (let i in this.values) {
							if (this.list[el].xuan == 2) {
								if (this.values[el]) {
									if (!this.values[el].daid) {
										if (!this.values[el].wen) {
											console.log('33')
											uni.showToast({
												title: '第' + (Number(el) + 1) + '题',
												icon: 'none',
												duration: 1000
											})
											this.key = false
											break
										} else {
											this.key = true
											continue
										}
									} else if (this.values[el].daid) {
										if (this.values[el].daid.length <= 0) {
											uni.showToast({
												title: '第' + (Number(el) + 1) + '题',
												icon: 'none',
												duration: 1000
											})
											this.key = false
											break
										} else {
											this.key = true
											continue
										}
									}
								} else {
									uni.showToast({
										title: '第' + (Number(el) + 1) + '题',
										icon: 'none',
										duration: 1000
									})
									this.key = false
									break
								}
							} else {
								this.key = true
								continue
							}
						}
						if (this.key == false) {
							break
						}
					}
					if (this.key) {
						let data = {
							api: 'wenda',
							data: this.values
						}
						api.look(data).then(res => {
							if (res.code == 200) {
								uni.navigateBack({
									delta: 1
								})
							} else {
								uni.showToast({
									title: "每人只能填写一次",
									icon: 'none',
									duration: 1000
								})
							}
						}).catch(err => {
							console.log(err)
						})
					}
				} else {
					uni.showToast({
						title: "请填写问卷",
						icon: 'none',
						duration: 1000
					})
				}
				api.add({
					id: uni.getStorageSync('message')[0].id,
					fen: 1,
					api: 'wenfenzen',
					fenname: '答卷'
				}).then(res => {
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			}, */
			save() {
				if (this.values.length > 0) {
					for (let el in this.list) {
						for (let i in this.values) {
							if (this.list[el].xuan == 2) {
								if (this.values[el]) {
									if (!this.values[el].daid) {
										if (!this.values[el].wen) {
											uni.showToast({
												title: '第' + (Number(el) + 1) + '题是必答题，请作答',
												icon: 'none',
												duration: 1000
											})
											this.key = false
											break
										} else {
											this.key = true
											continue
										}
									} else if (this.values[el].daid) {
										if (this.values[el].daid.length <= 0) {
											uni.showToast({
												title: '第' + (Number(el) + 1) + '题',
												icon: 'none',
												duration: 1000
											})
											this.key = false
											break
										} else {
											this.key = true
											continue
										}
									}
								} else {
									uni.showToast({
										title: '第' + (Number(el) + 1) + '题',
										icon: 'none',
										duration: 1000
									})
									this.key = false
									break
								}
							} else {
								this.key = true
								continue
							}
						}
						if (this.key == false) {
							break
						}
					}
					if (this.key) {
						this.submit()
					}
				} else {
					uni.showToast({
						title: "请填写问卷",
						icon: 'none',
						duration: 1000
					})
				}
			},
			// 提交
			submit() {
				api.look({
					api: 'wenda',
					data: this.values,
					nameid: uni.getStorageSync('message')[0].id ? uni.getStorageSync('message')[0].id : '',
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 2000,
							success: () => {
								api.add({
									id: uni.getStorageSync('message')[0].id ? uni.getStorageSync('message')[0].id : '',
									fen: 1,
									api: 'wenfenzen',
									fenname: '答卷'
								}).then(res => {
									console.log(res)
								}).catch(err => {
									console.log(err)
								})
							}
						})
					} else if (res.code == 401) {
						uni.showToast({
							title: "问卷被锁",
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: '每人只能回答一次',
							icon: 'none',
							duration: 2000
						})
					}
					setTimeout(() => {
						uni.navigateBack({
							delta: -1
						})
					}, 2000)
				}).catch(err => {
					console.log(err)
				})
			},
		},
		onShareAppMessage(options) {
			let shareObj = {
				success: (res) => {
					if (res.errMsg == 'shareAppMessage:ok') {
						uni.showToast({
							title: '分享成功',
							icon: 'success',
							duration: 1500
						})
					}
				},
				fail: () => {
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						uni.showToast({
							title: '取消分享',
							icon: 'none',
							duration: 2000
						})
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
				complete: () => {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
		},
		onLoad(options) {
			this.wenid = options.wenid
			api.look({
				api: 'wenfind',
				shu: '1',
				table: '3',
				wenid: this.wenid,
			}).then(res => {
				if (res.code == 200) {
					this.title = res.date[0].namewenid
					this.beizhu = res.date[0].text
					uni.setNavigationBarTitle({
						title: res.date[0].namewenid
					})
				}
			}).catch(err => {
				console.log(err)
			})
			api.look({
				api: 'tables',
				wenid: this.wenid
			}).then(res => {
				res.date.forEach((item1, index1) => {
					if (item1.pid != 3 && item1.pid != 4) {
						item1.di.forEach(el => {
							this.$set(el, 'check', false)
						})
					}
					if (item1.xiantiao) {
						this.$set(item1, 'showItem', false)
					} else {
						this.$set(item1, 'showItem', true)
					}
					if(item1.xuantiao) {
						res.date.forEach((el,index) => {
							if(el.id == item1.xuantiao) {
								item1.xuanIndex = index + 1
							}
						})
					}
				})
				res.date.forEach((el, index) => {
					if (el.xiantiao) {
						let arr = JSON.parse(el.xiantiao)
						res.date.forEach((item, idx) => {
							if (item.id == arr[0].id) {
								el.dependTi = idx + 1
								if (arr[0].di && arr[0].di.length > 0) {
									if (item.pid == 1 || item.pid == 2) {
										item.di.forEach((val, i) => {
											if (val.id == arr[0].di[0]) {
												el.dependItem = i + 1
												this.$set(val, 'dependBy', el.id)
											}
										})
									} else if (item.pid == 3) {
										this.$set(item, 'dependBy', el.id)
									}
								} else {
									if (item.pid == 1 || item.pid == 2) {
										item.di.forEach((val, i) => {
											this.$set(val, 'dependBy', el.id)
										})
									} else {
										this.$set(item, 'dependBy', el.id)
									}
								}
							}
						})
					}
				})
				this.list = res.date
				this.list.map(item => {
					item.show = false
					item.showTi = true
					if (item.pid == 4) {
						item.beizhu = JSON.parse(item.beizhu)
					}
					return item
				})
			}).catch(err => {
				console.log(err)
			})
		}
	}
</script>

<style lang="scss">
	.header-title {
		height: 100rpx;
		width: 690rpx;
		margin: 0rpx auto;
		line-height: 100rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #209FFC;
		text-align: center;
	}

	.beizhu {
		width: 690rpx;
		margin: 10rpx auto;
		font-size: 30rpx;
		color: #999;
	}

	.main-item {
		width: 690rpx;
		margin: 15rpx auto;

		.main-item-title {
			text {
				// color: #ff0000;
			}
		}

		.textareacss {
			width: 680rpx;
			height: 50rpx;
			line-height: 50rpx;
			margin: 10rpx auto;
			border: 1rpx solid #DFDFDF;
			border-radius: 10rpx;
		}
	}

	.labels {
		height: 60rpx;
		line-height: 60rpx;
		width: 100%;
		flex-wrap: wrap;

		.diImg {
			width: 100%;
			height: 100px;
			padding: 10px 0;
			box-sizing: border-box;

			image {
				max-width: 100%;
				max-height: 100%;
				object-fit: contain;
			}
		}
	}

	.save {
		width: 690rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		margin: 50rpx auto 20rpx;
		color: #fff;
		font-size: 36rpx;
		background: #209FFC;
		border-radius: 20rpx;
	}

	.jubao {
		color: #999;
		font-size: 30rpx;
		text-align: right;
		width: 690rpx;
		margin: 0rpx auto;
		margin-bottom: 20rpx;
	}

	.remark_box {
		padding-bottom: 30rpx;
		box-sizing: border-box;

		.img_box {
			width: 100%;
			height: 200rpx;

			image {
				width: 33%;
				height: 100%;
				margin-top: 20rpx;
			}
		}
	}

	.flex_ti {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;

		.other.labels {
			width: 50%;
		}
	}
</style>
